<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<html>
<head>
    <script type="text/javascript">
        function f1() {
            //获取样式，内部，行内，外部样式
            //js的dom方式只能获得“行内”样式
            console.log($('div').css('color'))
            console.log($('div').css('width'))
            console.log($('div').css('background-color'))
            console.log($('div').css('font-size'))
            //早期版本符合样式要拆分为具体样式进行获取
            console.log($('div').css('border'))
        }
        function f2() {
            //样式设置会被设置为行内样式
            //有则修改，无则添加
            $('div').css('font-size','40px')//添加
            $('div').css('color','red')//修改
            $('div').css('border','20px solid green')//设置，复合样式可以直接进行设置

        }
        function f3() {
            //通过json样式批量修改css样式
            $('div').css({'font-size':'50px',color:'purple',height:'100px',border:'20px solid blue'})
        }
    </script>
    <!--内部样式-->
    <link href="../css/14.css" type="text/css" rel="stylesheet" >
    <style type="text/css">
        div{width: 300px;height: 400px;background-color: lightblue}
    </style>
</head>
<body>
    <h2>css样式操作</h2>
    <!--样式分类：行内、内部、外部-->
    <!--行内样式-->
    <div style="color: aqua">今天风和日丽</div>

    <input type="button" value="获取样式" onclick="f1()">
    <input type="button" value="设置样式" onclick="f2()">
    <input type="button" value="通过json批量设置样式" onclick="f3()">
</body>
</html>
